<template>
    <div>
        <van-contact-card add-text="添加班级" type="add" @click="onAdd" style="position: fixed;z-index: 100;" />
        <div style="height: 75px;width:100%;"></div>
        <!-- <div v-for="item in list">
            name:{{item.name}}
        </div> -->
        <div v-show="show == 0">
            <div role="button" tabindex="0" index="1" v-for="(item, index) in list" :index="index"
                @click="onEdit(index)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon"></i>
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>班级名称：{{ item.name }}</div>
                    <div>辅导员电话：{{ item.counselorTelephone }}</div>
                </div><i class="van-icon van-icon-arrow van-cell__right-icon">
                </i>
            </div>
            <!-- <van-contact-card  type="edit" 
                :tel="item.counselorTelephone" /> -->
            <div style="height: 75px;width:100%;"></div>
        </div>
        <div v-show="show == 1">
            <van-form @submit="onSubmit">
                <van-field v-model="name" name="name" label="班级名称" :rules="[{ required: true, message: '请填写班级名称' }]" />
                <van-field v-model="counselor" name="counselor" label="辅导员"
                    :rules="[{ required: true, message: '请填写辅导员' }]" />
                <van-field v-model="counselorTelephone" name="counselorTelephone" label="辅导员电话"
                    :rules="[{ required: true, message: '请填写辅导员电话' }]" />
                <van-field v-model="practiceTitle" name="practiceTitle" label="实训名称"
                    :rules="[{ required: true, message: '实训名称' }]" />
                <van-field v-model="practiceContent" name="practiceContent" label="实训内容"
                    :rules="[{ required: true, message: '实训内容' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <van-button @click="back" type="primary">返回列表</van-button>
        </div>
        <div v-show="show == 2">
            <van-form @submit="onSubmitEdit">
                <van-field v-model="ename" name="ename" label="班级名称"
                    :rules="[{ required: true, message: '请填写班级名称' }]" />
                <van-field v-model="ecounselor" name="ecounselor" label="辅导员"
                    :rules="[{ required: true, message: '请填写辅导员' }]" />
                <van-field v-model="ecounselorTelephone" name="ecounselorTelephone" label="辅导员电话"
                    :rules="[{ required: true, message: '请填写辅导员电话' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <van-button @click="del" type="danger">删除班级</van-button>
            <div></div>
            <van-button @click="back" type="primary">返回列表</van-button>
        </div>

    </div>
</template>
<script>
import req from '../../request/index'
export default {
    name: '',
    data() {
        return {
            show: 0,
            chosenAddressId: '1',
            list: [],
            name: "",
            counselor: "",
            counselorTelephone: "",
            ename: "",
            ecounselor: "",
            ecounselorTelephone: "",
            eindex: "",
            practiceTitle:"",
            practiceContent:''
        };
    },
    methods: {
        back() {
            this.show = 0;
        },
        onAdd() {
            this.show = 1;
        },
        del() {
            req({
                url: "/delClassInfo",
                method: "post",
                data: {
                    id: this.list[this.eindex].id
                }
            }).then(res => {
                this.getClassInfo();
            }).catch(err => {
                this.getClassInfo();
            })
        },
        onEdit(index) {
            // console.log('编辑地址:' , this.list[index]);
            // console.log('编辑地址:' ,index);
            this.show = 2;
            this.ename = this.list[index].name;
            this.ecounselor = this.list[index].counselor;
            this.ecounselorTelephone = this.list[index].counselorTelephone;
            this.eindex = index;
        },
        onSubmitEdit(value) {
            console.log("修改123", value)
            //发请求 进行修改
            req({
                url: "/editClassInfo",
                method: "post",
                data: {
                    id: this.list[this.eindex].id,
                    name: value.ename,
                    counselor: value.ecounselor,
                    counselorTelephone: value.ecounselorTelephone,
                }
            }).then(res => {
                this.$dialog.alert({
                    message: res.data.msg,
                })
                this.getClassInfo();
            }).catch(err => {

            })
        },
        onSubmit(values) {
            values.relationTeacherId = this.$store.state.user.id;
            console.log(values)
            req({
                url: "/addClassInfo",
                method: "post",
                data: values
            }).then(res => {
                console.log(res)
                this.$dialog.alert({
                    message: res.data.msg,
                })
                this.getClassInfo();
            }).catch(err => {
                console.log(err)
            })
        },
        getClassInfo() {
            req({
                url: "/getClassInfo",
                method: "post",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                console.log(res)
                if (res.data.code == 0) {
                    this.list = res.data.data;
                    this.show = 0;
                }
            }).catch(err => {
                console.log(err)
            })
        }
    },
    computed: {
    },
    mounted() {
        //发请求获取班级列表
        this.getClassInfo()
    },
}
</script>